import React, { Component } from 'react';
import './main.css';

export default class Tag extends Component {

    state = {
        visible: true,
    };

    onClose () {
        this.setState({ visible: false });
    }

    render () {

        if (!this.state.visible) {
            return null;
        }

        return (
            <span 
                className="my-tag" 
                style={{ background: this.props.color }}
            >
                { this.props.children }
                { this.props.closable && <div onClick={ this.onClose.bind(this) }>x</div> }
            </span>
        );
    }

}

// export default function Tag (props) {

//     return (
//         <span 
//             className="my-tag" 
//             style={{ background: props.color }}
//         >
//             { props.children }
//         </span>
//     );
// }
